<template>
  <div class="appRzxxInfo">
    <el-dialog :title="dialogAppRzxxInfo.title" v-model="obj.visible" @update:model-value="dialogAppRzxxInfoChange"
      :style="{ right: '20px', top: '50%', transform: 'translateY(-50%)', position: 'fixed', margin: '0' }"
      width="600px">
      <!-- 步骤导航 -->
      <el-steps :active="activeStep" finish-status="success" align-center style="margin-bottom: 20px;">
        <el-step title="基本信息"></el-step>
        <el-step title="企业信息"></el-step>
      </el-steps>

      <!-- 步骤内容区域 -->
      <div class="steps-content">
        <!-- 步骤 1：基本信息 -->
        <div v-if="activeStep === 0">
          <el-form ref="miniProgramAuthenticationFormRef" :model="form" label-width="130px" :rules="rules">
            <el-form-item label="账号名称" prop="accountName">
              <el-input style="color: #2eb3b3" v-model="form.accountName" placeholder="请输入小程序名称"
                :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="命名类型" prop="accountNameType">
              <el-radio-group v-model="form.accountNameType">
                <el-radio :value="1">基于自选词汇命名</el-radio>
                <el-radio :value="2">基于商标命名</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="命名补充材料" prop="accountSupplemental">
              <image-upload v-model="form.accountSupplemental" :limit="10" :isShowTip="false">
              </image-upload>
              <span style="font-size: 10px;">支持格式为png、bmp、jpeg、jpg、gif，大小不超过2M，最多可上传10张；</span>
            </el-form-item>

            <el-form-item label="联系电话" prop="thirdPartyPhone">
              <el-input v-model="form.thirdPartyPhone" placeholder="请输入联系电话"></el-input>
            </el-form-item>

            <el-form-item label="支付方式" prop="payType">
              <el-radio-group v-model="form.payType">
                <el-radio :value="1">消耗服务商预购包</el-radio>
                <el-radio :value="2">小程序开发者自行支付</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="服务市场appId" prop="serviceAppid">
              <el-input v-model="form.serviceAppid" placeholder="请输入服务市场appId"></el-input>
            </el-form-item>

            <el-form-item label="资质证明材料" prop="qualificationOther">
              <image-upload v-model="form.qualificationOther" :limit="10" :isShowTip="false">
              </image-upload>
              <span style="font-size: 10px;">支持格式为png、bmp、jpeg、jpg、gif，大小不超过2M，最多可上传10张；</span>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤 2：企业信息 -->
        <div v-else-if="activeStep === 1">
          <el-form ref="miniProgramAuthenticationFormRef" :model="form" label-width="120px" :rules="rules">
            <el-form-item label="联系人姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>

            <el-form-item label="联系人邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入联系人邮箱"></el-input>
            </el-form-item>

            <el-form-item label="联系人手机号" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入联系人手机号"></el-input>
            </el-form-item>

            <el-form-item label="发票类型" prop="invoiceType">
              <el-radio-group v-model="form.invoiceType">
                <el-radio :value="1">不开发票</el-radio>
                <el-radio :value="2">电子发票</el-radio>
                <el-radio :value="3">增值税专票</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="纳税识别号" prop="taxpayerId" v-if="form.invoiceType != '1'">
              <el-input v-model="form.taxpayerId" placeholder="请输入纳税识别号"></el-input>
            </el-form-item>

            <el-form-item label="企业电话" prop="enterprisePhone" v-if="form.invoiceType == '3'">
              <el-input v-model="form.enterprisePhone" placeholder="请输入企业电话"></el-input>
            </el-form-item>

            <el-form-item label="企业注册地址" prop="enterpriseAddress" v-if="form.invoiceType == '3'">
              <el-input v-model="form.enterpriseAddress" placeholder="请输入企业注册地址"></el-input>
            </el-form-item>

            <el-form-item label="企业开户银行" prop="bankName" v-if="form.invoiceType == '3'">
              <el-input v-model="form.bankName" placeholder="请输入企业开户银行"></el-input>
            </el-form-item>

            <el-form-item label="企业银行账号" prop="bankAccount" v-if="form.invoiceType == '3'">
              <el-input v-model="form.bankAccount" placeholder="请输入企业银行账号"></el-input>
            </el-form-item>

            <el-form-item label="发票备注" prop="descRemark" v-if="form.invoiceType == '3'">
              <el-input type="textarea" v-model="form.descRemark" placeholder="请输入备注信息"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 底部按钮区域 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button v-if="activeStep === 0" type="primary" @click="validateAndNext">下一步</el-button>
          <el-button v-if="activeStep > 0" type="primary" @click="validateAndUpper">上一步</el-button>
          <el-button v-if="activeStep === 1" :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AppRzxxInfo" lang="ts">
import { listMiniProgramAuthentication, getMiniProgramAuthentication, delMiniProgramAuthentication, addMiniProgramAuthentication, updateMiniProgramAuthentication } from '@/api/platform/miniProgramAuthentication';
import { listMiniProgramBaseInfo, getMiniProgramBaseInfo, delMiniProgramBaseInfo, addMiniProgramBaseInfo, updateMiniProgramBaseInfo } from '@/api/platform/miniProgramBaseInfo';
import { MiniProgramAuthenticationVO, MiniProgramAuthenticationQuery, MiniProgramAuthenticationForm } from '@/api/platform/miniProgramAuthentication/types';
import { ref } from 'vue'
import { fa } from 'element-plus/es/locale/index.mjs';
const obj = defineProps({
  rzId: {
    type: Number,
    default: undefined
  },
  id: {
    type: Number,
    default: undefined
  },
  visible: {
    type: Boolean,
    default: false
  }

}) //
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const miniProgramAuthenticationFormRef = ref<ElFormInstance>();
const disabled = ref(false);
const buttonLoading = ref(false);
// 当前步骤（0:基本信息，1:联系人信息）
const activeStep = ref(0);

const dialogAppRzxxInfo = reactive<DialogOption>({
  visible: false,
  title: '认证信息填写'
});

const initFormData: MiniProgramAuthenticationForm = {
  id: undefined,
  baseId: undefined,
  nickName: undefined,
  customerType: undefined,
  payType: undefined,
  qualificationOther: undefined,
  accountName: undefined,
  accountNameType: undefined,
  accountSupplemental: undefined,
  authIdentification: undefined,
  authIdentMaterial: undefined,
  thirdPartyPhone: undefined,
  serviceAppid: undefined,
  name: undefined,
  email: undefined,
  mobile: undefined,
  invoiceType: undefined,
  taxpayerId: undefined,
  enterprisePhone: undefined,
  enterpriseAddress: undefined,
  bankName: undefined,
  bankAccount: undefined,
  descRemark: undefined,
  remark: undefined
}
const data = reactive<PageData<MiniProgramAuthenticationForm, MiniProgramAuthenticationQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    baseId: undefined,
    customerType: undefined,
    payType: undefined,
    qualificationOther: undefined,
    accountName: undefined,
    accountNameType: undefined,
    accountSupplemental: undefined,
    authIdentification: undefined,
    authIdentMaterial: undefined,
    thirdPartyPhone: undefined,
    serviceAppid: undefined,
    name: undefined,
    email: undefined,
    mobile: undefined,
    invoiceType: undefined,
    taxpayerId: undefined,
    enterprisePhone: undefined,
    enterpriseAddress: undefined,
    bankName: undefined,
    bankAccount: undefined,
    descRemark: undefined,
    params: {
    }
  },
  rules: {
    accountNameType: [
      { required: true, message: "请选择命名类型", trigger: "blur" }
    ],
    accountSupplemental: [
      { required: true, message: "请上传命名补充材料", trigger: "change" }
    ],
    thirdPartyPhone: [
      { required: true, message: "请输入联系电话", trigger: "blur" }
    ],
    payType: [
      { required: true, message: "请选择支付方式", trigger: "blur" }
    ],
    serviceAppid: [
      { required: true, message: "请输入服务市场appId", trigger: "change" }
    ],
    qualificationOther: [
      { required: true, message: "请上传资质证明材料", trigger: "change" }
    ],
  }
});
const { queryParams, form, rules } = toRefs(data);

const emit = defineEmits(['update:visible']);
const dialogAppRzxxInfoChange = (val: boolean) => {
  emit('update:visible', val);
}

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  miniProgramAuthenticationFormRef.value?.resetFields();
}

/** 详情按钮操作 */
const getInfo = async () => {
  let _id = obj.rzId;
  if (_id != undefined) {
    const res = await getMiniProgramAuthentication(_id);
    form.value = res.data;
    if (obj.id != undefined && obj.id != null) {
      const res = await getMiniProgramBaseInfo(obj.id);
      form.value.accountName = res.data.nickName;
      form.value.baseId = obj.id;
    }
    dialogAppRzxxInfo.visible = true;
    dialogAppRzxxInfo.title = '认证信息修改'
  } else {
    if (obj.id != undefined && obj.id != null) {
      const res = await getMiniProgramBaseInfo(obj.id);
      form.value.accountName = res.data.nickName;
      form.value.baseId = obj.id;
    }
    dialogAppRzxxInfo.visible = true;
  }
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialogAppRzxxInfoChange(false);
}

/** 提交按钮 */
const submitForm = () => {
  miniProgramAuthenticationFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateMiniProgramAuthentication(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addMiniProgramAuthentication(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialogAppRzxxInfo.visible = false;
    }
  });
}

// 进入下一步
const validateAndNext = () => {
  activeStep.value = 1; // 进入企业信息步骤
};
// 进入上一步
const validateAndUpper = () => {
  activeStep.value = 0; // 进入企业信息步骤
};

onMounted(() => {
  getInfo();
});

</script>

<style lang="scss">
/* 步骤内容间距 */
.steps-content {
  margin-top: 20px;
}

/* 上传组件样式（按需调整） */
.upload-demo {
  margin-top: 8px;
}
</style>
